<template>
  <div id="container">
    <TodoHeader @sendTodo="handleTodoOfSend"></TodoHeader>
    <TodoMain>
      <TodoItem
        v-for="todo in todos"
        :key="todo.id"
        v-bind="todo"
        :drag-id="todo.id"
        @toggle="handleToggle"
        @remove="removeTodoById"
        @setContent="setContent"
        draggable="true"
        @dragstart="dragStart"
        @dragover="dragOver"
        @drop="drop"
      ></TodoItem>
    </TodoMain>
    <TodoFooter
      :todos="todos"
      @selectAllToDone="handleAllToDone"
      @clearDone="clearDone"
      @clearAll="clearAll"
    ></TodoFooter>
  </div>
</template>

<script setup>
import useTodo from "./hooks/useTodo";
import TodoHeader from "./components/TodoHeader.vue";
import TodoItem from "./components/TodoItem.vue";
import TodoMain from "./components/TodoMain.vue";
import TodoFooter from "./components/TodoFooter.vue";
const {
  todos,
  draggingEle,
  handleTodoOfSend,
  handleToggle,
  removeTodoById,
  setContent,
  handleAllToDone,
  clearDone,
  clearAll,
  dragStart,
  dragOver,
  drop,
} = useTodo();
</script>

<style scoped>
.container {
  width: 100%;
}
</style>